<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>辩论赛</title>
    <style>

     table {
         font-family: verdana,arial,sans-serif;
         font-size:11px;
         color:#333333;
         border-width: 0px;
         border-color: #666666;
         border-collapse: collapse;
         width: 100%;
     }
     table th {
         border-width: 1px;
         padding: 8px;
         border-style: solid;
         border-color: #666666;
         background-color: #dedede;
         text-align: center;
     }
     table td {
         border-width: 0px;
         padding: 8px;
         border-style: solid;
         border-color: #666666;
         background-color: #ffffff;
         text-align: center;
     }

    </style>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/qrcode.js"></script>
    <script src="/js/jquery.qrcode.js"></script>
</head>
<body>
    <table style="margin-bottom: 20px;">
        <tbody>
            <tr>
                <td colspan="3" class="question" style="font-size: 75px;"></td>
            </tr>
            <tr>
                <td class="left" style="width: 50%; font-size: 100px;"></td>
                <td rowspan="2" class="qrcode"></td>
                <td class="right" style="width: 50%; font-size: 100px;"></td>
            </tr>
            <tr>
                <td class="" style="font-size: 50px;"></td>
                <td class="" style="font-size: 50px;"></td>
            </tr>
            <tr>
                <td colspan="3" style="font-size: 55px; color: gray;" >实时改票，更刺激哦!!!!</td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr style="height: 500px;">
                <td class="left-score" style="background-color: red; font-size: 100px; color: white;"></td>
                <td class="right-score" style="background-color: blue; font-size: 100px; color: white;"></td>
            </tr>
        </tbody>
    </table>
</body>
<script>

    $(function () {

    function getQueryVariable(variable, dft = 'default')
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return dft;
    }

    function setScore(left, right)
    {
        var total = left + right;

        $('.left-score').css('width', Math.round(left / total * 100) + '%');
        $('.right-score').css('width', Math.round(right / total * 100) + '%');

        $('.left-score').text(left);
        $('.right-score').text(right);
    }

    $('.question').text(decodeURI(getQueryVariable('question', 'URL 参数 question 会显示在这里')));
    $('.left').text(decodeURI(getQueryVariable('left', '参数 left 会显示在这里')));
    $('.right').text(decodeURI(getQueryVariable('right', '参数 right 会显示在这里')));

    var rand = Math.round(Math.random() * 1000);
    var url = window.location.origin + '/vote.html?rand=' + rand;
    console.log(url);

    $('.qrcode').qrcode({
        text: url,
        width: 500, //宽度
        height:500, //高度
        color : "#aaaaaa"
	});

    var ws = new WebSocket('ws://argue.yao-yang.cn:4321/' + rand);

    ws.onmessage = function (event) {
        if (typeof event.data === 'string') {
            var vote_result = JSON.parse(event.data);
            setScore(vote_result.left, vote_result.right);
 	    console.log(vote_result.vote_infos);
        }
    };

    ws.onopen = function () {
        ws.send(JSON.stringify({
 	    total: getQueryVariable('total', 37),
        }));
    };

    });

</script>
</html>
